<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/address.css" />
<title>个人信息</title>
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="layer/layer.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">
	function updateUser() {
		var userName = $.trim($("#userName").val());
		var userSex = $("#userSex").val();
		if(userName.length < 2 || userName.length > 10){
			layer.msg('请输入2~10位用户名');
		}else{
			$.post("UserServlet/update", {
				"userName" : userName,
				"userSex" : userSex
			}, function(data) {
				if (data == 0)
					layer.msg('修改用户信息失败');
				else
					location.reload()
			}, "text");
		}
	}
	//修改密码
	$(function () {
      $("#UpdatePass").click(function () {
      	//获取验证码
      	//原密码
		  let psw = $("#psw").val();
      	 //旧密码
		  let userPwd =$.trim($("#userPwd").val());
		  //新密码
		  let newUserPwd =$.trim($("#newUserPwd").val());
		  //验证码
		  let code=$.trim( $("#codeText").val());
		  console.log(code);
		  if (userPwd==''||newUserPwd==""||code==''){
			  layer.msg("请输入完整数据");
		  }
		 else if (psw!=userPwd){
		  	layer.msg("旧密码错误");
		  }else if (newUserPwd.length<6||newUserPwd.length>20){
			  layer.msg("请输入6到20长度");
		  }else {
		  	 $.post("UserServlet/update",{"userPwd":newUserPwd,code:code},function (data) {
                if (data==1){
                     alert("修改成功，需要重新登录");
					top.location.href="main.jsp";
				}else if (data==-1) {
					layer.msg("验证码错误");
				}else {
					layer.msg("修改失败");
				}
			 },"text");
		  }

	  })
	});

	//验证码的刷新
	function changeCode() {

		$("#code").attr("src","${pageContext.request.contextPath}/CodeImgServlet?time="+ Math.random(1000));
	    console.log("${sessionScope.code}");

	}

</script>
</head>
<body>
	<div class="m-address">
		<div class="wrapper">
			<div class="area" style="bottom: 110px;">
				<div class="type border-bottom">
					<span class="left">个人信息</span>
				</div>
				<div class="title1 a-user">
					<div class="fl">
						<span><img src="images/member/desc-icon-name.png" /> 姓名/性别</span>
						<span class="pad">${user.userName }
							${user.userSex=="M"?"先生":"女士" }</span>
					</div>
					<div class="fr">
						<a href="#" class="login-redcolor" onclick="change('name_sex',1)">修改</a>
					</div>
				</div>
				<div style="display: none;" class="title1 a-user a-setuser change"
					id="update_name_sex">
					<div class="fl userleft">
						<span><img src="images/member/desc-icon-name.png" /> 姓名/性别</span>
					</div>
					<div class="text-input07" style="width: 155px">
						<input id="userName" type="text" placeholder="姓名" />
					</div>
					<div>
						<select id="userSex" name="userSex" class="text-input07">
							<option value="M" ${user.userSex == "M"?"selected":""}>先生</option>
							<option value="F" ${user.userSex == "F"?"selected":""}>女士</option>
						</select>
					</div>
					<div class="act-botton clear">
						<div class="save-button">
							<a href="javascript:updateUser()" class="radius">保存</a>
						</div>
						<div class="cancel-button">
							<a href="javascript:" class="radius"
								onclick="change('name_sex',2)">取消</a>
						</div>
					</div>
				</div>
				<div class="border-bottom"></div>
				<div class="title1 a-user">
					<div class="fl">
						<span><img src="images/member/desc-icon-phone.png" /> 手机号码</span>
						<span class="pad">${user.userTel}</span>
					</div>
				</div>
				<div class="border-bottom"></div>
				<div class="title1 a-user">
					<div class="fl">
						<span><img src="images/login/icon-name.png" /> 登陆密码</span> <input
							type="password" id="psw" value="${user.userPwd }" style="border: none" class="pad" />
						<span class="add-icon cursor"></span>
					</div>
					<div class="fr">
						<a href="#" class="login-redcolor" onclick="change('pwd',1)">修改</a>
					</div>
				</div>
				<div style="display: none;" class="title1 a-user change"
					id="update_pwd">
					<div class="fl">
						<span><img src="images/login/icon-name.png" /> 登陆密码</span>
					</div>
					<div class="fl">
						<div class="text-input07">
							<input type="text" id="userPwd" placeholder="请输入旧密码" />
						</div>
						<div class="fr">
							<p style="line-height: 20px; margin-left: 10px">
								请输入6-16位密码，可使用阿拉伯数字 <br /> 英文字母或两者结合
							</p>
						</div>
						<br />
						<div class="text-input07">
							<input type="text" id="newUserPwd" placeholder="请输入新密码" />
						</div>

						<br />
						<div class="text-input07">
							<input type="text" id="codeText" placeholder="请验证码"/>
						</div>
						<div class="fl">
							<img src="CodeImgServlet" id="code" alt="请刷新"/>
							<p style="line-height: 30px; margin-left: 10px">
								看不清？
								<a href="#" class="login-redcolor" onclick="changeCode()">换一张</a>
							</p>
						</div>

					</div>
					<div class="act-botton clear"
						style="margin: 20px 0; padding: 20px 0">
						<div class="save-button">

	                            <a href="#" class="radius" id="UpdatePass">保存</a>
						</div>
						<div class="cancel-button">
							<a href="javascript:" class="radius" onclick="change('pwd',2)">取消</a>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</body>
</html>